<div class="content-wrapper">
  <section class="content-header">
  <h1>
    Apps
    <small>panel</small>
  </h1>
  </section>

  <!-- Main content -->
  <section class="content">
  <% @apps_hash.each do |group, apps| %>
  <h4><%= group.name %></h4>
  <div class="row">
    <% apps.each do |app| %>
    <div class="col-sm-4">
      <div class="box box-solid">
        <div class="box-header">
          <div class="row" style="padding: 8px 5px 0px 5px">
            <div class="col-sm-3">
            </div>
            <div class="col-sm-6">
              <h4><%= app.name %></h4>
              <h5><small>应用id: <%= app.id %></small></h5>
            </div>
            <div class="col-sm-3">
            </div>
          </div>
        </div>
        <div class="box-footer text-center">
          <div class="col-sm-4 col-border">
            <h5><%= app.versions.first.version rescue '-' %></h5>
            <h6><small>最新版本</small></h6>
          </div>
          <div class="col-sm-4 col-border">
            <h5><%= (((app.versions.first.fails.to_f/(app.versions.first.fails + app.versions.first.success)).round(2))*100).to_i rescue '-'  %></h5>
            <h6><small>崩溃率</small></h6>
          </div>
          <div class="col-sm-4 col-border">
            <h5><%= app.versions.first.released_date.strftime('%y-%m-%d') rescue '-' %></h5>
            <h6><small>发布时间</small></h6>
          </div>
        </div>
        <div class="box-footer text-center">
          <div class="row">
            <div class="col-sm-4 col-border">
              <a class="chart clickable" 
                  data-myurl="<%= pie_apps_path(id: app.id) %>"
                  data-appname="<%= app.name %>">
              <%= icon('fas', 'chart-pie') %>
              </a>
            </div>
            <div class="col-sm-4 col-border">
              <a class="timeline-link clickable"
                  data-myurl="<%= timeline_apps_path(id: app.id) %>"
                  data-appname="<%= app.name %>">
                <%= icon('fas', 'history') %>
              </a>
            </div>
            <div class="col-sm-4 col-border">
              <a class="line-link clickable" 
                  data-myurl="<%= line_apps_path(id: app.id) %>"
                  data-appname="<%= app.name %>">
                <%= icon('fas', 'chart-line') %>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <% end %>
  </div>
  <% end %>
  <div class="modal fade edit-modal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-blue">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hiddent="true">&times;</span></button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
  </div>
  </section>
  <script charset="utf-8">
  $('.chart').on('click', function(){
    var url = $(this).data('myurl');
    var name = $(this).data('appname');
    BootstrapDialog.show({
      title: name + "崩溃率饼图",
      size: BootstrapDialog.SIZE_WIDE,
      onshown: function(dialogRef){
        $(dialogRef.$modalBody).load(url)
      }
    })
  })
  $('.timeline-link').on('click', function(){
    var url = $(this).data('myurl');
    var name = $(this).data('appname');
    BootstrapDialog.show({
      title: name + "时间戳",
      size: BootstrapDialog.SIZE_WIDE,
      onshown: function(dialogRef){
        $(dialogRef.$modalBody).load(url)
      }
    })
  })
  $('.line-link').on('click', function(){
    var url = $(this).data('myurl');
    var name = $(this).data('appname');
    BootstrapDialog.show({
      title: name + "崩溃率折线图",
      size: BootstrapDialog.SIZE_WIDE,
      onshown: function(dialogRef){
        $(dialogRef.$modalBody).load(url)
      }
    })
  })
  </script>
</div>